extends ../_layout

block active
  - sidebar_active = 'form-upload.html'

block content
  h3 File Upload
  blockquote.box-placeholder
    p
      | File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery.
      br
      | Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
      br
      | Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
  br
  // The file upload form used as target for the file upload widget
  form#fileupload(action='//jquery-file-upload.appspot.com/', method='POST', enctype='multipart/form-data')
    // Redirect browsers with JavaScript disabled to the origin page
    noscript
      input(type='hidden', name='redirect', value='https://blueimp.github.io/jQuery-File-Upload/')
    // The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload
    .row.fileupload-buttonbar
      .col-lg-7
        // The fileinput-button span is used to style the file input field as button
        span.btn.btn-success.fileinput-button
          i.fa.fa-fw.fa-plus
          span Add files...
          input(type='file', name='files[]', multiple='')
        button.btn.btn-primary.start(type='submit')
          i.fa.fa-fw.fa-upload
          span Start upload
        button.btn.btn-warning.cancel(type='reset')
          i.fa.fa-fw.fa-times
          span Cancel upload
        button.btn.btn-danger.delete(type='button')
          i.fa.fa-fw.fa-trash
          span Delete
        // The global file processing state
        span.fileupload-process
      // The global progress state
      .col-lg-5.fileupload-progress.fade
        // The global progress bar
        .progress.progress-striped.active(role='progressbar', aria-valuemin='0', aria-valuemax='100')
          .progress-bar.progress-bar-success(style='width:0%;')
        // The extended global progress state
        .progress-extended &nbsp;
    // The table listing the files available for upload/download
    table.table.table-striped(role='presentation')
      tbody.files

  // The template to display files available for upload
  script#template-upload(type='text/x-tmpl').
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade">
            <td>
                <span class="preview"></span>
            </td>
            <td>
                <p class="name">{%=file.name%}</p>
                <strong class="error text-danger"></strong>
            </td>
            <td>
                <p class="size">Processing...</p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            </td>
            <td>
                {% if (!i && !o.options.autoUpload) { %}
                    <button class="btn btn-primary start" disabled>
                        <em class="fa fa-fw fa-upload"></em>
                        <span>Start</span>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn-warning cancel">
                        <em class="fa fa-fw fa-times"></em>
                        <span>Cancel</span>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}

  // The template to display files available for download
  script#template-download(type='text/x-tmpl').
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
            <td>
                <span class="preview">
                    {% if (file.thumbnailUrl) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                    {% } %}
                </span>
            </td>
            <td>
                <p class="name">
                    {% if (file.url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                    {% } else { %}
                        <span>{%=file.name%}</span>
                    {% } %}
                </p>
                {% if (file.error) { %}
                    <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                {% } %}
            </td>
            <td>
                <span class="size">{%=o.formatFileSize(file.size)%}</span>
            </td>
            <td>
                {% if (file.deleteUrl) { %}
                    <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                        <em class="fa fa-fw fa-trash"></em>
                        <span>Delete</span>
                    </button>
                {% } else { %}
                    <button class="btn btn-warning cancel">
                        <em class="fa fa-fw fa-times"></em>
                        <span>Cancel</span>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}


block vendor_css
  // CSS to style the file input field as button and adjust the Bootstrap progress bars
  link(rel='stylesheet', href='../vendor/blueimp-file-upload/css/jquery.fileupload.css')
block vendor_js
  // The jQuery UI widget factory, can be omitted if jQuery UI is already included
  script(src='../vendor/jquery-ui/ui/widget.js')
  // The Templates plugin is included to render the upload/download listings
  script(src='../vendor/blueimp-tmpl/js/tmpl.js')
  // The Load Image plugin is included for the preview images and image resizing functionality
  script(src='../vendor/blueimp-load-image/js/load-image.all.min.js')
  // The Canvas to Blob plugin is included for image resizing functionality
  script(src='../vendor/blueimp-canvas-to-blob/js/canvas-to-blob.js')
  // The Iframe Transport is required for browsers without support for XHR file uploads
  script(src='../vendor/blueimp-file-upload/js/jquery.iframe-transport.js')
  // The basic File Upload plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload.js')
  // The File Upload processing plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload-process.js')
  // The File Upload image preview & resize plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload-image.js')
  // The File Upload audio preview plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload-audio.js')
  // The File Upload video preview plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload-video.js')
  // The File Upload validation plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload-validate.js')
  // The File Upload user interface plugin
  script(src='../vendor/blueimp-file-upload/js/jquery.fileupload-ui.js')
  // Demo
  script(src='js/demo/demo-upload.js')

